<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="utf-8">
    <title>出票通知-发送短信</title>
	<%@ include file="/page/common/common.jsp" %>	
	<%@ include file="/page/common/bootstrap.jsp" %>
	
    <script type="text/javascript">
    	$(function(){
			$("#passUl li").click(function(){
				previewTemp($(this));
			});
		});
    	
    	/** 发送短信 */
    	function sendMsg(){
    		var templateId="";
    		var smsContent="";
    		var passIds="";
    		if($("#tempFlag").attr("checked")=="checked"){//使用模版
    			templateId=$("#template").val();
    			if(templateId==""){
    				alert("请选择短信模版");
    				return;
    			}
    		}else{//不使用模版
    			smsContent=$("#smsContent").val();
    			if(smsContent==""){
    				alert("请输入短信内容");
    				return;
    			}
    		}
    		
    		
    		var $passLi=$("#passUl li");
    		for(var i=0;i<$passLi.length-1;i++){
    			passIds+="passIds="+$($passLi[i]).attr("passId")+"&";
    		}
    		passIds+="passIds="+$($passLi[$passLi.length-1]).attr("passId");
    		
    		var ps="templateId="+templateId+"&"+passIds;
    		ps+="&smsContent="+ajaxEncode(smsContent);
    		$.messager.progress({
    			title:"发送短信",
    			msg:"正在发送短信，请稍后...",
    			text:"",
    			interval:200
    		}); 
    		$.post('${ctx}/sys/etdzsms/sendSms.sys?'+ps,function(data){
    				$.messager.progress('close');
	        		if(data.success){//操作成功
						$.messager.confirm('提示','发送完成，是否查看发送历史列表',function(r){
							if(r){
								//导航进入短信发送历史。
								window.parent.setmain('短信发送历史','${ctx}/page/sys/smshistory/history_list.jsp');
							}
						});
					}else{
						$.messager.alert('提示',data.msg,'warning');	
					}
	        	});
    	}
    	
    	/** 切换是否使用模版 */
    	function toggleTemp(){
    		var $tempFlag=$("#tempFlag");
    		if($tempFlag.attr("checked")=="checked"){//使用模版
    			$("#template").removeAttr("disabled");
    			$("#smsContent").attr("disabled","disabled");
    		}else{//不使用模版
    			$("#template").attr("disabled","disabled");
    			$("#smsContent").removeAttr("disabled");
    			$("#smsContent").val("");
    		}
    	}
    	
    	/** 预览模版 */
    	function previewTemp(li){
    		var $tempFlag=$("#tempFlag");
    		if(!($tempFlag.attr("checked")=="checked"))
    			return;
    		if($("#template").val()==""){
    			alert("请选择一个模版");
    			return;
    		}
    		
    		var templateId=$("#template").val();
    		var passId=li.attr("passId");
    		var ps="templateId="+templateId;
    		ps+="&passId="+passId;
    		
    		$.post('${ctx}/sys/etdzsms/previewTemp.sys?'+ps,function(data){
    				$.messager.progress('close');
	        		if(data.success){//操作成功
						$("#smsContent").val(data.data);
					}else{
						$.messager.alert('提示',data.msg,'warning');	
					}
	        	});
    	}
	</script>	
	
	<style type="text/css">
		.pass-select{
			background-color: #999;
			color:#fff;
		}
		
		.sel{
			border: 2px solid #999;
		}
	</style>
  </head>
  
  <body>
	  <div class="container">
	  	
	  		<h4 class="htitle">旅客基本信息</h4>
    		<ul class="thumbnails row" id="passUl">
    			<c:forEach items="${passList}" var="pass" >
    				<!-- 旅客方块 -->
	    			<li class="span4" passId="${pass.passId}">
	    				<div class="well" style="cursor: pointer;">
	    					<div class="media">
		        				<div class="media-body">
		        					<h4>${pass.passName}</h4>
									<table class="table">
										<tbody>
											<tr>
												<td style="text-align: right;">票号：</td>
												<td>${pass.tktNo}</td>
											</tr>
											<tr>
												<td style="text-align: right;">航班号：</td>
												<td>${pass.flightNo}</td>
											</tr>
											<tr>
												<td style="text-align: right;">航段：</td>
												<td>
												<c:forEach items="${pass.segmentChs}" var="seg">
													${seg}<br/>
												</c:forEach>
												</td>
											</tr>
											<tr>
												<td style="text-align: right;">航班日期：</td>
												<td>
												<c:forEach items="${pass.flightDates}" var="flightDate">
													${flightDate}<br/>
												</c:forEach>
												</td>
											</tr>
											<tr>
												<td style="text-align: right;">起飞时间：</td>
												<td>
												<c:forEach items="${pass.flightTimes}" var="flightTime">
													${flightTime}<br/>
												</c:forEach>
												</td>
											</tr>
											<tr>
												<td style="text-align: right;">手机号码：</td>
												<td>${pass.telphone}</td>
											</tr>
										</tbody>
									</table>
		        				</div>
	        				</div>
	    				</div>
	    			</li>	    
    			</c:forEach>			
    		</ul>  
    		
    		<h4 class="htitle">发送信息</h4>
    		<div class="well">
    			<form class="form-inline" id="smsForm" action="send_msg.jsp">
    				<label class="checkbox">
						<input type="checkbox" onclick="toggleTemp();" id="tempFlag"> 使用模版：
					 </label>
					 
					 <select name="template" id="template" disabled="disabled">
				   	 	  <option value="">选择模版</option>
				   	 	  <c:forEach items="${tempList}" var="temp">
						  	<option value="${temp.templateId}">${temp.templateName}</option>
						  </c:forEach>
					</select>	
					<span class="help-inline text-info">点击相应的旅客卡片进行信息预览</span>
				    <div class="control-group">
				    	<label style="margin-left: 16px;">编辑短信:</label>
					   
					    <div class="controls">
					   		<textarea rows="5" class="span8 limitNum" id="smsContent" charnum="300"></textarea>		   	 	
					    </div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button type="button" class="btn" onclick="location.href='${ctx}/page/sys/etdzsms/input.jsp'">返回</button>
							<button type="button" class="btn btn-info" onclick="sendMsg();"><i class="icon-white icon-envelope"></i>发送</button>
						</div>
					</div>	    		    
				</form>
    		</div>
	    </div><!-- end container -->	 
  </body>
</html>
